<template>
  <van-action-sheet v-model="show" title="发表回复" @closed="closedEvent">
    <div class="main">
      <div class="item">
        <img class="avatar" :src="reItem.aut_photo" alt="" />
        <div class="middle">
          <div class="name">{{ reItem.aut_name }}</div>
          <div class="content">{{ reItem.content }}</div>
          <div class="time">
            <span class="curr-time">{{ reItem.pubdate | formatDate }}</span>
          </div>
        </div>
      </div>
      <van-divider>回复列表</van-divider>
      <!-- 上拉加载
           van-list
              v-model
              finished
              finished-text
              @load
                  1:调用接口
                  2：v-model值改变成false
                  3:数据要累加
                  4：修改下一页接口条件
                  5：判断是否全部加载完成，
                    完成  finished=true
       -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有了"
        @load="getData"
      >
        <div class="item" v-for="(item, index) in list" :key="index">
          <img class="avatar" :src="item.aut_photo" alt="" />
          <div class="middle">
            <div class="name">{{ item.aut_name }}</div>
            <div class="content">{{ item.content }}</div>
            <div class="time">
              <span class="curr-time">{{ item.pubdate | formatDate }}</span>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div class="bottom">
      <van-field placeholder="请输入评论内容" v-model.trim="msg">
        <template #button>
          <!-- 回复评论
            1：绑定点击事件
            2：导入回复评论api
            3:调用api
            4:调用完成
               a:提示
               b:数据渲染
               c:清空输入框内容
             -->
          <van-button size="small" type="info" @click="submit">回复</van-button>
        </template>
      </van-field>
    </div>
  </van-action-sheet>
</template>
<script>
import { comments, commentsPost } from '@/api/article'
export default {
  data () {
    return {
      msg: '',
      show: false,
      reItem: '',
      offset: null,
      list: [],
      loading: false,
      finished: false
    }
  },
  created () {},
  methods: {
    async getData () {
      const res = await comments({
        type: 'c',
        source: this.reItem.com_id,
        offset: this.offset,
        limit: 1
      })
      this.loading = false
      this.list.push(...res.data.data.results)
      this.offset = res.data.data.last_id
      if (res.data.data.last_id === res.data.data.end_id) {
        this.finished = true
      }
      console.log('回复数据：', res)
    },
    closedEvent () {
      // 子传父  this.$parent====父组件的this (了解)
      //   this.$parent.refreshRecomment()
      //   子传父  1：子组件标签  @子组件方法名=”父组件方法名“   2：子组件内：this.$emit('子组件方法名'，实参)
      this.$emit('refreshRecomment')
    },
    // 回复评论
    async submit () {
      if (this.msg === '') {
        this.$toast.fail('请选输入内容后再评论')
        return
      }
      const res = await commentsPost({
        target: this.reItem.com_id,
        content: this.msg,
        art_id: this.$route.params.id
      })
      this.$toast.success('回复评论成功')
      this.list.unshift(res.data.data.new_obj)
      this.msg = ''
      this.reItem.reply_count++
      console.log(res)
    }
  }
}
</script>
<style lang="less" scoped>
.item {
  display: flex;
  margin-bottom: 15px;
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
  }
  .middle {
    flex: 1;
    .name {
      color: #466b9d;
    }
    .content {
      padding: 6px 0;
      word-break: break-all;
      line-break: anywhere;
    }
    .time {
      .curr-time {
        color: #808080;
        padding-right: 10px;
      }
    }
  }
}
.main {
  padding: 0 15px 40px;
}
.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>
